<template>

	<view class="bg">
		<globalheader title="充值">


		</globalheader>
		<image src="/static/czbg.png" mode="" class="img"></image>
		<view class="top">

			<view class="" style="height: 30rpx;">

			</view>
			<view class="info">
				<view class="title">
					账号金币
				</view>
				<view class="title1">
					{{info.money}}
				</view>
			</view>

		</view>
		<view class="bot1">
			<view class="title">
				选择充值金额
			</view>
			<view class="pricwe-list">
				<view class="price-item" v-for="(item,index) in state.obj.recharge_data" :class="{active:item.id===state.id}"
					@tap="state.id=item.id">
					<view class="title1">
						{{item.title}}
					</view>
					<view class="title2">
						￥{{item.price}}
					</view>
				</view>

			</view>
			<view class="title">
				选择支付方式
			</view>
			<view class="list-way">

				<view class="list-item" @tap="state.wayindex=0">
					<image src="/static/wxzf.png" mode="" class="icon"></image>
					<view class="lable">
						微信支付
					</view>
					<image :src="state.wayindex===0?'/static/icon_checked.png':'/static/icon_check.png'" mode="">
					</image>
				</view>

				<view class="list-item" @tap="state.wayindex=1">
					<image src="/static/zfb.png" mode="" class="icon"></image>
					<view class="lable">
						支付宝支付
					</view>
					<image :src="state.wayindex===1?'/static/icon_checked.png':'/static/icon_check.png'" mode="">
					</image>
				</view>
				<view class="list-item" @tap="state.wayindex=2">
					<view class="lable">
						线下支付
					</view>
					<image :src="state.wayindex===2?'/static/icon_checked.png':'/static/icon_check.png'" mode="">
					</image>
				</view>
			</view>

			<view class="title" v-if="state.wayindex===2">
				线下支付账号
			</view>
			<image :src="state.obj.recharge_img" mode="heightFix" style="margin: 0 30rpx;height: 300rpx;"
				v-if="state.wayindex===2" @tap="view(state.obj.recharge_img)"></image>
			<view class="title" v-if="state.wayindex===2">
				上传支付凭证
			</view>
			<view class="imgwapper ss-flex ss-row-center" @tap="upimg('payimg')" v-if="state.wayindex===2">
				<image :src="state.payimg_full" v-if="state.payimg_full" style="width: 100%;" mode="widthFix">
				</image>
				<image src="/static/addicon.png" v-else mode="" class="add"></image>

			</view>

			<button class="submit" @tap="submit">充值</button>
		</view>


	</view>
</template>

<script setup>
	import jwx from '../../utils/jwx.js'
	import {
		computed,
		reactive,
		ref
	} from 'vue';

	import paysdk from '@/utils/sdk-h5-weixin.js';

	import LC from '../../LC';
	import {
		onLoad,
		onReady,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	let state = reactive({
		id: 0,
		wayindex: 0,
		obj: {
			recharge_money: {}
		},
		id: '',
		orderid: '',
		payimg: '',
		payimg_full: '',
		money: 0,
	})

	onLoad(() => {


		init()
	})

	let info = computed(() => LC.$store('user').info)
	onShow(() => {
		if (state.orderid) {
			console.log('========')
			surePay()
		}

	})
	const prePage = () => {
		let pages = getCurrentPages();
		let prePage = pages[pages.length - 1];

		// #ifdef H5
		return prePage;
		// #endif
		return prePage.$vm;
	}

	function getUrlCode() {
		// 截取url中的code方法
		var url = location.search;
		// this.winUrl = url;
		var theRequest = new Object();
		if (url.indexOf('?') != -1) {
			var str = url.substr(1);
			var strs = str.split('&');
			for (var i = 0; i < strs.length; i++) {
				theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
			}
		}
		return theRequest;
	}

	function view(a) {
		uni.previewImage({
			urls: [a]
		})
	}

	function surePay() {
		console.log('========')

		LC.$api.pay.rechargepayshow({
				no: state.orderid
			})
			.then((res) => {

				if (res.code === 1) {
					if (res.data.ispay) {
						paySuccess()
					}
				}
			})


	}

	function paySuccess() {

		uni.$u.toast('支付成功')
		LC.$store('user').userinfo()

	}

	function init() {


		LC.$api.pay.rechargeconfig({

			})
			.then((res) => {
				if (res.code === 1) {
					state.obj = res.data
					state.id = state.obj.recharge_data[0].id
				}
			})

	}

	function collect() {


		LC.$api.home.articlecollect({
				id: state.id
			})
			.then((res) => {
				if (res.code === 1) {
					state.obj.is_collect = !state.obj.is_collect
				}
			})

	}
	let model = ref(null)

	function submit() {
		// console.log(state.obj.price * 1, info.value.money * 1)
		// if (state.obj.price * 1 > info.value.money * 1) {
		// 	model.value.open()
		// 	return
		// }


		if (state.wayindex + 1 === 3 && state.payimg.length < 1) {
			uni.$u.toast('请上传凭证')
			return
		}

		LC.$api.pay.recharge({
				pay: state.wayindex + 1,
				id: state.id,
				payimg: state.payimg
			})
			.then((res) => {
				console.log(res)
				if (res.code === 1) {
					state.orderid = res.data.no
					if (state.wayindex === 2) {
						uni.$u.toast('提交成功')
					}
					if (state.wayindex === 1) {
						console.log(res.data.no)
						// #ifdef H5
						window.open(res.data.data)
						// #endif
						// #ifdef APP
						plus.runtime.openURL('alipays://platformapi/startapp?saId=10000007&qrcode=' + res.data.data)
						// #endif
					}
					if (state.wayindex === 0) {
						// #ifdef H5
						window.open(res.data.data)
						// #endif
						// #ifdef APP
						plus.runtime.openURL(res.data.data)
						// #endif
						// LC.$api.user.wechatpay({
						// 	no: res.data.no,
						// 	openid: uni.getStorageSync('openid')
						// })
						// .then((params)=>{
						// 	// #ifdef H5
						// 	paysdk.init(params.data)
						// 	paysdk.wxpay(params.data,{
						// 		success: function(res) {
						// 				// console.log(res);  
						// 				paySuccess()
						// 				// console.log('微信JSAPI返回支付成功')

						// 			},
						// 			fail: function(res) {
						// 				uni.$u.toast('支付失败')
						// 				// console.log('微信JSAPI返回支付失败')
						// 			},
						// 			cancel: function(res) {
						// 				uni.$u.toast('支付取消')
						// 				// console.log('微信JSAPI返回支付失败')
						// 			},
						// 	})
						// 	// #endif

						// jweixin.chooseWXPay({
						// 	appId:params.data.appId,
						// 	timestamp: params.data.timeStamp, // 支付签名时间戳，注意微信wechat中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
						// 	nonceStr: params.data.nonceStr, // 支付签名随机串，不长于 32 位  
						// 	package: params.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
						// 	signType: params.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
						// 	paySign: params.data.paySign, // 支付签名  
						// 	success: function(res) {
						// 		// console.log(res);  
						// 		paySuccess()
						// 		// console.log('微信JSAPI返回支付成功')

						// 	},
						// 	cancel: function(res) {
						// 		uni.$u.toast('支付失败')
						// 		// console.log('微信JSAPI返回支付失败')
						// 	},
						// 	// complete:function(res){  
						// 	//     console.log(res)  
						// 	// }  
						// });
						// })

					}


				}


			})

	}

	function upimg(key) {
		uni.chooseImage({
			success: async (chooseImageRes) => {
				const tempUrl = chooseImageRes.tempFilePaths[0];
				uploadPay_image(tempUrl, key);
			},
		});
	}
	async function uploadPay_image(tempUrl, key) {
		if (!tempUrl) return;
		let {
			url,
			fullurl
		} = await LC.$api.app.upload(tempUrl, 'ugc');
		state[key] = url;
		state[key + '_full'] = fullurl;
		console.log(state.formdata)
	}
</script>

<style lang="scss">
	.imgwapper {
		width: 191rpx;
		min-height: 191rpx;
		background: #f0f0f0;
		border-radius: 15rpx;
		margin-left: 30rpx;

		.add {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.submit {
		margin: 36rpx 30rpx;

		height: 98rpx !important;
		background: #FC5652 !important;
		border-radius: 50rpx !important;
		font-size: 30rpx !important;
		font-weight: 400;
		color: #fff !important;
		line-height: 95rpx !important;
		letter-spacing: 3px;
	}

	.bot1 {
		position: relative;
		z-index: 1;


		background: #fff;
		border-radius: 50rpx 50rpx 0px 0px;
		margin-top: -20rpx;
		padding: 40rpx 0 10rpx 0;

		.list-way {
			.list-item {
				align-items: center;
				height: 96rpx;
				border: 1px solid #e5e5e5;
				border-radius: 20rpx;
				display: flex;

				margin-top: 30rpx;
				padding: 0 30rpx;
				margin: 0 30rpx;
				display: flex;
				margin-bottom: 20rpx;

				.icon {
					width: 46rpx;
					margin-left: 0;
					margin-right: 10rpx;
					height: 46rpx;
				}

				image {
					margin-left: auto;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.title {
			padding: 0 30rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 40rpx;
		}

		.pricwe-list {
			padding: 0 30rpx;
			display: flex;
			flex-wrap: wrap;

			.price-item {
				&.active {
					background: #ff550082;
					border: 6rpx solid #FC5652;
				}

				&:nth-child(3n) {
					margin-right: 0;
				}

				margin-right: 20rpx;
				width: 210rpx;
				height: 140rpx;
				background: #f6f7f9;
				border-radius: 20rpx;
				text-align: center;
				margin-bottom: 20rpx;

				.title1 {
					font-size: 30rpx;
					font-weight: 700;
					color: #000;
					margin-top: 18rpx;
				}

				.title2 {
					font-size: 24rpx;
					font-weight: 700;
					color: #666;
					margin-top: 8rpx;
				}
			}
		}
	}

	.bg {
		width: 100%;
		height: 364rpx;
		position: relative;
		background: #FC5652;
		position: relative;

		.img {
			right: 0;
			top: -100rpx;
			position: absolute;
			width: 560rpx;
			height: 460rpx;
		}

		.info {
			padding: 30rpx 40rpx;
			color: #fff;

			.title1 {
				margin-top: 15rpx;
				font-weight: 600;
			}
		}
	}

	.left-icon {
		width: 50rpx;
		height: 50rpx;
	}
</style>